<!-- 某个jira的工时详情组件 -->
<script setup lang="ts">
import { ref, watch } from "vue"
import * as JiraApi from "@/api/jira"
import { type JiraReportDetailData } from "@/api/jira/types/jira"
import { ElMessage } from "element-plus"
import { truncateStr } from "@/utils/common"

// 定义组件接收的 props 类型
interface Props {
  code: string // 父组件传递的 code
}
const props = defineProps<Props>()
// 声明用于通知父组件清理code
const emit = defineEmits<{
  (event: "cleanCode", value: string): void
}>()
// 初始化状态
const localVisible = ref(false)
const activeSelf = ref(["1", "2"])
const jiraReportData = ref<JiraReportDetailData | null>(null)

// 关闭抽屉并通知父组件
const closeDrawer = () => {
  localVisible.value = false
  emit("cleanCode", "")
}

// 获取工时详情数据
const fetchReportDetail = async (code: string) => {
  if (!code) return
  try {
    const { data } = await JiraApi.reportJiraDetail(props.code)
    jiraReportData.value = data
    localVisible.value = true
  } catch (error) {
    console.error("获取工时详情数据失败：", error)
    ElMessage.error("获取工时详情数据失败功")
  }
}

watch(
  () => props.code, // 监听 props.code
  (newCode) => {
    // 当 code 发生变化时触发
    fetchReportDetail(newCode) // 调用函数来获取新的数据
  }
)
</script>

<template>
  <el-drawer v-model="localVisible" size="60%" :close-on-click-modal="true" :with-header="false" @close="closeDrawer">
    <!-- 抽屉内容 -->
    <el-descriptions
      class="margin-top"
      :title="`【${jiraReportData?.jira?.code}】工时详情:`"
      :column="3"
      size="default"
      :border="true"
    >
      <el-descriptions-item :span="2">
        <template #label>
          <div class="cell-item">
            <SvgIcon name="Jira" class="svg-icon" />
            内容
          </div>
        </template>
        <el-tooltip
          v-if="jiraReportData?.jira?.content && jiraReportData.jira.content.length > 30"
          :content="jiraReportData.jira.content"
          placement="top"
        >
          <span>{{ truncateStr(jiraReportData.jira.content, 30) }}</span>
        </el-tooltip>
        <span v-else>{{ jiraReportData?.jira?.content }}</span>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Clock />
            </el-icon>
            预计工时
          </div>
        </template>
        {{ jiraReportData?.jira?.durationHour }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <PieChart />
            </el-icon>
            已用工时(合计)
          </div>
        </template>
        {{ jiraReportData?.jira?.totalUsedTimeHour }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <PieChart />
            </el-icon>
            已用工时(自身)
          </div>
        </template>
        {{ jiraReportData?.jira?.usedTimeHour }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <PieChart />
            </el-icon>
            子任务已用工时
          </div>
        </template>
        <el-tag size="small">{{ jiraReportData?.jira?.subUsedTimeHour }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <el-divider />
    <el-collapse v-model="activeSelf">
      <el-collapse-item name="1">
        <template #title>
          <h3>自身已用工时列表:{{ jiraReportData?.workReports?.length }} 条</h3>
        </template>
        <div>
          <el-table :data="jiraReportData?.workReports" border style="width: 100%">
            <el-table-column prop="jira" label="JIRA" align="center" />
            <el-table-column prop="userName" label="姓名" align="center" />
            <el-table-column prop="date" label="日期" align="center" />
            <el-table-column prop="durationHour" label="工时(小时)" align="center" />
            <el-table-column prop="content" label="内容" align="center" show-overflow-tooltip />
          </el-table>
        </div>
      </el-collapse-item>

      <el-collapse-item name="2">
        <template #title>
          <h3>子jira已用工时列表: {{ jiraReportData?.subWorkReports?.length }} 条</h3>
        </template>
        <div>
          <el-table :data="jiraReportData?.subWorkReports" border style="width: 100%">
            <el-table-column prop="jira" label="JIRA" align="center" />
            <el-table-column prop="userName" label="姓名" align="center" />
            <el-table-column prop="date" label="日期" align="center" />
            <el-table-column prop="durationHour" label="工时(小时)" align="center" />
            <el-table-column prop="content" label="内容" align="center" show-overflow-tooltip />
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>

    <template #footer>
      <div style="flex: auto">
        <el-button type="primary" @click="closeDrawer">关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>
